<template>
  <div class="container" @click="handleGallaryClick">
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="slide of images" :key="slide.id">
          <div class="Gallary-img"><img width="100%" height="320" :src="slide.icon" /></div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {$iconlist} from '../../assets/js/common.js'
export default{
    name:'CommonGallary',
    props:{
      images:{
        type:Array,
        default(){
          return $iconlist()
        }
      }
    },
    data() {
      return {
        swiperOption: {
          observer:true,
          observeParents:true,
          pagination : '.swiper-pagination',
          paginationType:'fraction',
          mousewheelControl : true,
          loop:true,
          effect : 'cube',
          cube: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
          }
        },

      }
    },
    methods:{
      handleGallaryClick(){
        this.$emit('close')
      }
    }
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  z-index 99
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  background #000
  .wrapper
    width 100%
    height 0
    padding-bottom 100%
    overflow inherit
    background-color #fff
    .Gallary-img
      padding 20px
    .swiper-pagination
      color #fff
      bottom -52px
</style>
